<template>
    <div class="container">
        <div class="row">
            <div class="col-2">
                <div class="subnav">
                    <RouterLink @click="index=0" :class="{active:index==0}" to="/goods-list">商品列表</RouterLink>
                    <RouterLink @click="index=1" :class="{active:index==1}" to="/goods-type">商品分类</RouterLink>
                </div>
            </div>
            <div class="col-10">
                <div class="mb20">
        商品列表
    </div>
    <form class="form-inline">
        <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" id="inputPassword2" placeholder="商品名称">
        </div>
        <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" id="inputPassword2" placeholder="商品编码">
        </div>
        <div class="form-group mx-sm-3 mb-2">
            <select style="width: 230px;" id="inputState" class="form-control">
                <option selected>商品分类</option>
                <option>零食</option>
                <option>美妆</option>
                <option>娱乐</option>
            </select>
        </div>
        <button type="button" class="btn btn-primary mb-2">搜索</button>
    </form>
    <div class="mb20">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-outline-primary">全部</button>
            <button type="button" class="btn btn-secondary">出售中</button>
            <button type="button" class="btn btn-secondary">已下架</button>
            <button type="button" class="btn btn-secondary">已售罄</button>
        </div>
        <button @click="show=true" type="button" class="btn btn-primary ml10">创建商品</button>
        <button type="button" class="btn btn-outline-success ml10">批量导入</button>
        <button @click="onDel" type="button" class="btn btn-danger ml10">批量删除</button>
    </div>

    <table class="table">
        <thead>
            <tr>
                <th scope="col">
                    <input type="checkbox" value="">
                </th>
                <th scope="col">商品ID</th>
                <th scope="col">商品图片</th>
                <th scope="col">商品名称</th>
                <th scope="col">商品价格</th>
                <th scope="col">总销量</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="el in arr">
                <th scope="row"><input type="checkbox" value=""></th>
                <th scope="row">{{ el.id }}</th>
                <td>
                    {{ el.uname }}
                    <span class="badge badge-pill badge-success ml10 pointer">超级管理员</span>
                </td>
                <td>{{ el.realname }}</td>
                <td>{{ el.sort }}</td>
                <td>{{ el.time }}</td>
                <td>{{ el.total }}</td>
                <td>
                    <button @click="showEdit=true" type="button" class="btn btn-primary btn-sm">编辑</button>
                    <button @click="showEdit=true" type="button" class="btn btn-light btn-sm">复制</button>
                    <button  @click="onDel" type="button" class="btn btn-danger btn-sm">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
            <li class="page-item disabled">
                <a class="page-link">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" @click="pageChange" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </ul>
    </nav>
            </div>
            
        </div>
    </div>


    

    <!-- 弹框 -->
    <van-dialog width="80%" :show-confirm-button="false" :show-cancel-button="false" v-model:show="show" show-cancel-button>
        <div class="pop">
            <p class="pop-title">
                <span>添加数据</span>
                <span class="pointer">
                    <van-icon @click="show=false" name="close" size="30"/>
                </span>
            </p>
            <ManagerAdd></ManagerAdd>
            <p class="tr">
                <button @click="onCancel" type="button" class="btn btn-light mr10">取消</button>
                <button @click="onCancel" type="button" class="btn btn-primary">确定</button>
            </p>
        </div>
    </van-dialog>
    
    <!-- 弹框-编辑 -->
    <van-dialog width="80%" :show-confirm-button="false" :show-cancel-button="false" v-model:show="showEdit" show-cancel-button>
        <div class="pop">
            <p class="pop-title">
                <span>编辑数据</span>
                <span class="pointer">
                    <van-icon @click="showEdit=false" name="close" size="30"/>
                </span>
            </p>
            <GoodsAdd></GoodsAdd>
            <p class="tr">
                <button @click="showEdit=false" type="button" class="btn btn-light mr10">取消</button>
                <button @click="showEdit=false" type="button" class="btn btn-primary">确定</button>
            </p>
        </div>
    </van-dialog>

</template>
<script setup>
import { ref } from 'vue';
import { showConfirmDialog  } from 'vant';
// 导入组件
import GoodsAdd from './GoodsAdd.vue'

const show = ref(false);
const showEdit = ref(false);
//二级导航索引
const index = ref(0);

const onCancel = ()=>{
    //获取表单数据，提交接口
    show.value = false;
}

const arr = ref([
    {id:"1001",uname:"admin",realname:"贾宝玉1",sort:1,time:"2024-06-27 15:22:22"},
    {id:"1001",uname:"admin",realname:"贾宝玉2",sort:1,time:"2024-06-27 15:22:22"},
    {id:"1001",uname:"admin",realname:"贾雨村",sort:2,time:"2024-06-27 15:22:22"}
]);

const pageChange = ()=>{
    arr.value = [
    {id:"1001",uname:"admin",realname:"林黛玉1",sort:1,time:"2024-06-27 15:22:22"},
    {id:"1001",uname:"admin",realname:"林黛玉2",sort:1,time:"2024-06-27 15:22:22"},
    {id:"1001",uname:"admin2",realname:"薛宝钗",sort:2,time:"2024-06-27 15:22:22"}
]
}
console.log(111111);
const onDel = ()=>{
    showConfirmDialog({
      title: '系统提示',
      message:'真的要删除吗？',
    })
    .then(() => {
    })
    .catch(() => {
    });
}
</script>
<style>
body{
    --van-dialog-radius:0;
}
.pop{padding: 10px;}
.pop-title{display: flex;justify-content: space-between;align-items: center;}
</style>
<style scoped>
.subnav a{
    display: block;
    color: #333;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
}
.subnav a.active{
    color: #007bff;
}
</style>